<template>
  <view class="container">
    <!-- 通知列表 -->
    <view class="notification-list">
      <view class="notification-item" v-for="(item, index) in notifications" :key="index">
        <view class="notification-header">
          <view class="system">
            <text class="system-title">系统通知</text>
            <text class="notification-time">{{ item.time }}</text>
          </view>
          <text class="notification-title">{{ item.title }}</text>
        </view>
        <text class="notification-content">{{ item.content }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      notifications: [
        {
          title: '通过审核',
          time: '10:50',
          content: '您提交的【公司视频】内容已通过审核，求职者可正常查看'
        },
        {
          title: '职务已完成',
          time: '10:50',
          content: '恭喜，您的职务“主管”已完善'
        },
        {
          title: '职务已完成',
          time: '10:50',
          content: '恭喜，您的职务“主管”已完善'
        },
        {
          title: '职务已完成',
          time: '10:50',
          content: '恭喜，您的职务“主管”已完善'
        },
        {
          title: '职务已完成',
          time: '10:50',
          content: '恭喜，您的职务“主管”已完善'
        }
      ]
    };
  }
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #f5f5f5;
}

.notification-list {
  border-radius: 10px;
}

.notification-item {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  border-radius: 5px;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-header {
  margin-bottom: 5px;
}

.system {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.system-title,
.notification-time {
  font-size: 14px;
  color: #999;
}

.notification-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
}

.notification-content {
  font-size: 13px;
  color: #666;
}
</style>